<template>
  <div class="user-list-container">
    <div class="header">
      <div class="header-title">{{ role.description }}列表</div>
      <el-button
        size="small"
        type="primary"
        v-if="userGuardList.includes(guard.RoleManage)"
        @click="addUserRole"
      >
        <svg-icon icon-class="add"></svg-icon> 添加
      </el-button>
    </div>
    <div class="table-content">
      <el-table
        class="table"
        stripe
        border
        :data="userList"
        size="small"
      >
        <el-table-column
          label="账号"
          align="center"
          prop="username"
        >
        </el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="display_name"
        ></el-table-column>
        <el-table-column
          label="邮箱"
          align="center"
          prop="email"
        >
        </el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          prop="mobile"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          v-if="userGuardList.includes(guard.RoleManage)"
        >
          <template
            slot-scope="scope"
            v-if="scope.row.type!=='system'"
          >
            <el-button
              size="small"
              icon="el-icon-document-remove"
              type="text"
              @click="deleteUserRole(scope.row)"
            >移出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        align="right"
        class="paging-footer"
      >
        <el-pagination
          background
          @size-change="pageSizeChangeHandler"
          @current-change="currentPageChangeHandler"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui';
import { getUserListApi, getUserListByRoleUuidApi } from '../../../api/user';
import { SortType } from '../../../constants/common';
import { parseError } from '../../../utils';
import { deleteUserRoleApi } from '../../../api/role';
export default {
  props: {
    role: Object,
    default: () => {}
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      name: '',
      email: '',
      mobile: null,
      pageSizes: [5, 10, 20, 50, 100],
      sort: { sortType: SortType.DESC, orderBy: 'createdAt' },
      userList: [],
      totalCount: 0,
      organizationId: null,
      includeRole: true
    };
  },
  methods: {
    search() {
      getUserListApi(
        this.currentPage - 1,
        this.pageSize,
        this.sort.sortType,
        this.sort.orderBy,
        this.organizationId,
        this.name,
        this.email,
        this.mobile,
        this.role.uuid,
        this.includeRole
      )
        // getUserListByRoleUuidApi(this.currentPage - 1, this.pageSize, this.sortType, this.role.uuid)
        .then(res => {
          this.userList = res.data;
          this.totalCount = res.total_count;
        })
        .catch(error => Message.error(parseError(error)));
    },
    deleteUserRole(row) {
      MessageBox.confirm(`确认移出${row.username}吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteUserRoleApi(row.uuid, this.role.uuid)
            .then(res => {
              if (res.result) Message.success('移除用户角色成功');
            })
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.search());
        })
        .catch(() => {});
    },
    addUserRole() {
      this.$router.push({ name: 'noSelectedRoleUserList', query: { uuid: this.role.uuid } });
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.search();
    },
    currentPageChangeHandler() {
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.user-list-container {
  padding: 0 0 0 10px;
  width: calc(100% - 40px);
  .header {
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
    }
    margin: 10px 10px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-title {
      font-size: 24px;
      font-weight: 800;
    }
  }
  .table-content {
    background-color: #fff;
    .table {
      border: 1px solid #fff;
    }
    .paging-footer {
      padding: 10px 10px;
    }
    .el-pagination {
      padding: 0;
    }
  }
}
</style>
